import React from 'react';
import { Button, Balloon, Dropdown, Menu, Message, PopConfirm } from '@teamix/ui';
import { ButtonIcon, YunxiaoIcon } from '@alife/devops-ui';
import docs from 'utils/docs';
import CmdModal from './cmdModal';
import exceed from 'utils/apimap';
import track from 'utils/track';
import intl from '../../../../../../../../../../locale';

export default class MoreBtn extends React.Component {
  state = {
    visible: false,
    isCmdModalOpen: false,
  };

  onMoreClick = () => {
    const { visible } = this.state;
    this.setState({
      visible: !visible,
    });
  };

  onConfirm = () => {
    if (this.state.submitting) return;
    this.setState({ submitting: true });
    track({
      action: 'delete_lfs_file',
      page: 'Repo-Settings-LFS',
      type: '',
      control: '',
    });

    const { pathResource } = window.FORCE;
    const { record, getLfsList, getLfsInfo } = this.props;
    exceed
      .fetch({
        api: 'project.lfs.single.delete',
        params: {
          projectId: pathResource.id,
          lfsId: record.id,
        },
      })
      .then((result) => {
        const { success } = result;
        this.setState({
          visible: false,
          submitting: false,
        });

        if (success) {
          Message.success({
            title: intl.get({
              id: 'code-assets.containers.lfsList.moreBtn.GitLfsDeleted',
              defaultMessage: 'Git LFS 文件删除成功',
            }),
          });

          // 删除成功后更新表格以及容量
          getLfsList && getLfsList();
          getLfsInfo && getLfsInfo();
        } else {
          this.setState({ submitting: false });
          Message.error({
            title: intl.get({
              id: 'code-assets.containers.lfsList.moreBtn.UnableToDeleteTheGit',
              defaultMessage: 'Git LFS 文件删除失败',
            }),
          });
        }
      })
      .fail(() => {
        this.setState({ submitting: false });
        Message.error({
          title: intl.get({
            id: 'code-assets.containers.lfsList.moreBtn.UnableToDeleteTheGit.1',
            defaultMessage: 'Git LFS 删除失败',
          }),
        });
      });
  };

  onCancel = () => {
    this.setState({
      visible: false,
    });
  };

  render() {
    const { isCmdModalOpen } = this.state;
    const { record } = this.props;
    return (
      <React.Fragment>
        <Dropdown
          trigger={
            <Button type="primary" style={{ marginLeft: 12 }} text onClick={this.onMoreClick}>
              {intl.get({
                id: 'code-assets.containers.lfsList.moreBtn.More',
                defaultMessage: '更多',
              })}
              <YunxiaoIcon type="arrow-down-2-line" />
            </Button>
          }
          triggerType="click"
          align="tr br"
          visible={this.state.visible}
          onVisibleChange={(visible, type) => {
            if (type === 'docClick') {
              this.setState({
                visible,
              });
            }
          }}
        >
          <Menu>
            <Menu.Item
              onClick={() => {
                this.setState({
                  visible: false,
                  isCmdModalOpen: true,
                });

                track({
                  action: 'check_lfs_commits',
                  page: 'Repo-Settings-LFS',
                  type: '',
                  control: '',
                });
              }}
            >
              {intl.get({
                id: 'code-assets.containers.lfsList.moreBtn.ViewAssociatedSubmission',
                defaultMessage: '查看关联提交',
              })}
            </Menu.Item>
            <Menu.Item>
              <PopConfirm
                triggerType="click"
                align="t"
                type="warning"
                title={intl.get({
                  id: 'code-assets.containers.lfsList.moreBtn.ConfirmDeletion',
                  defaultMessage: '确认删除',
                })}
                needAdjust
                content={intl.get({
                  id: 'code-assets.containers.lfsList.moreBtn.AreYouSureYouWant',
                  defaultMessage: '确定要删除该文件么？',
                })}
                onConfirm={() => {
                  this.onConfirm();
                }}
                confirmProps={{ loading: this.state.submitting }}
                onCancel={this.onCancel}
                popupProps={{ loading: this.state.submitting }}
                trigger={
                  <div className="lfs-delete-item">
                    {intl.get({
                      id: 'code-assets.containers.lfsList.moreBtn.Delete',
                      defaultMessage: '删除',
                    })}

                    <Balloon
                      closable={false}
                      trigger={
                        <ButtonIcon
                          name="question-line"
                          style={{ marginRight: 4, display: 'inline-block', color: '#E62412' }}
                        />
                      }
                      align="t"
                    >
                      <a target="_blank" href={docs('lfs-delete')} rel="noreferrer">
                        {intl.get({
                          id: 'code-assets.containers.lfsList.moreBtn.WhatIsTheImpactOf',
                          defaultMessage: '删除文件有什么影响？',
                        })}
                      </a>{' '}
                    </Balloon>
                  </div>
                }
              />
            </Menu.Item>
          </Menu>
        </Dropdown>
        <CmdModal
          onClose={() => {
            this.setState({
              isCmdModalOpen: false,
            });
          }}
          visible={isCmdModalOpen}
          modalData={record.oid}
        />
      </React.Fragment>
    );
  }
}
